<template>
  <div class="page-search">
    <!-- searchFormConfig是一些基础配置
    formData是给每个input绑定的数据, 相当于在组件上使用v-model: 默认给组件传递modelValue,默认监听组件发射的@update:modelValue事件  -->
    <red-form v-bind="searchFormConfig" v-model="formModelData">
      <template #title>
        <h2 class="title">高级检索</h2>
      </template>
      <template #action>
        <div class="action">
          <el-button
            type="primary"
            icon="el-icon-refresh-left"
            @click="handleResetBtnClick"
          >
            重置
          </el-button>
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="handleSearchBtnClick"
          >
            搜索
          </el-button>
        </div>
      </template>
    </red-form>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import redForm from '@/base-ui/form/index';

export default defineComponent({
  props: {
    searchFormConfig: {
      type: Object,
      required: true
    }
  },
  components: {
    redForm
  },
  emits: ['handleResetBtnClick', 'handleSearchBtnClick'],
  setup(props, { emit }) {
    // 1.根据传入的字段决定v-model绑定的字段.
    const formItems = ref(props.searchFormConfig.ElFormItems); // 传过来的每个items
    const formOriginData: any = {}; // 用来赋值的对象
    for (const item of formItems.value) {
      formOriginData[item.field] = ''; // 初始化
    }
    // red-form的input输入的实时内容,自动从formConfig取出field字段.
    const formModelData = ref(formOriginData); // 给对象用ref包裹,且加上v-model使用,无需监听返回的事件,这个自动会更新.

    // 2.点击重置按钮
    const handleResetBtnClick = () => {
      // 不能直接这样赋值, 因为form用我们传过去的值是使用 ...(浅拷贝).
      // form.vue引用的是解构之后的数据,ref的也是解构之后的数据,只有解构后赋值的数据改变,才会触发响应式
      // 我们在这里直接formModelData.value是把整个对象给替换掉了, 无法触发响应式.
      // formModelData.value = formOriginData;
      /*  red-form使用语法糖的遗留
      for (const key in formModelData.value) {
        formModelData.value[key] = ''; // 只有一个一个改,form组件里面的才会被响应式同步
      } */
      formModelData.value = formOriginData; // 点击重置按钮重置这个对象,清空对象每个属性的值.
      emit('handleResetBtnClick');
    };

    // 3.点击搜索按钮,告诉user,user再告诉page-content.
    const handleSearchBtnClick = () => {
      console.log(formModelData.value);

      emit('handleSearchBtnClick', formModelData.value); // 告诉使用我的组件(user)
    };

    return {
      formModelData, // 生成,传给form组件作为v-model绑定的对象.
      handleResetBtnClick,
      handleSearchBtnClick
    };
  }
});
</script>

<style scoped lang="less">
.title {
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
}
.action {
  text-align: right;
  padding: 10px 20px;
}

/*
 */
</style>
